<template>
	<view class="" v-if="goodsInfo.create_at">
		<!-- <view class="border-rs20 mg-30 pg-30 bgColor-white title">
			<text class="font-30 font-w">退款商品</text>
			<view class="">
				<view class="borderbg mt-30 position-r"><text class="actve"></text></view>
				<view class="mt-20 d-flex-yCenter-sb font-24">
					<text :class="index==1?'actve':''" v-for="(item,index) in statusArr" :key='index'>{{item}}</text>
				</view>
			</view>
		</view> -->
		<view class="pg-30 mt-30 bgColor-white" v-if='goodsInfo.status==0'>
			<view style="color: #FF2400;">请耐心等待商家处理</view>
			<view style="color: #B6B6B6;" class="mt-10">
				商家同意退款后会给出退款地址，请按照退款地址寄回 商品
			</view>
		</view>
		<view class="bgColor-white px-30 mt-30">
			<x-card-strip :border='false' leftText="申请状态" :rightText='infoStatus'></x-card-strip>
		</view>
		<view class="pg-30 mt-30 bgColor-white">
			<navigator url="#" class="d-flex-yCenter-sb" hover-class="none">
				<text>操作日志</text>
				<u-icon name="arrow-right" color="#000" size="28"></u-icon>
			</navigator>
			<view class="d-flex mt-20" v-for="item,index of goodsInfo.log" :key='index'>
				<view class="">
					<image style="width: 45rpx;height: 45rpx;" src="../static/my-item.png" mode=""></image>
				</view>
				<view class="w-100 ml-20">
					<view class="d-flex-yCenter-sb  border-b">
						<text>{{item.operator_txt}}</text>
						<text class="color-999 font-24">{{$tool.time(item.addtime*1000)}}</text>
					</view>
					<view class="py-10 d-inline-block">{{item.title}}</view>
					<view class="d-flex flex-d color-999 font-24">
						<text>{{item.content}}</text>
					</view>
					<view class="d-flex aling-centen flex-w">
						<image class="imgwh-120" style="padding: 10rpx;" @tap="$tool.previmg(v)" :src="v"
							v-for="(v,i) in item.images" :key='i' mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="border-rs20 pg-30 bgColor-white mt-30" style="margin-bottom: 150rpx;">
			<text class="font-30 font-w">退款商品</text>
			<view class="goodItems d-flex mt-30" v-for="(item,index) in goodsInfo.goods_list" :key='index'>
				<view class="">
					<image :src="item.goods_logo" mode=""></image>
				</view>
				<view class="flex-grow1 d-flex flex-d jfy-sb ml-20">
					<text class="text-overflow2">{{item.goods_title}}</text>
					<view class="d-flex jfy-sb" style="margin-bottom: 10rpx;">
						<text class="pay font-24">￥{{item.price_real}}</text>
						<text class="font-24">x{{item.number_goods}}</text>
					</view>
				</view>
			</view>
			<view class="d-flex-yCenter font-26 mt-20 pt-30">
				<text style="color: #B6B6B6;">退款金额</text>
				<text style="margin-left: 60rpx;">¥{{goodsInfo.money}}</text>
			</view>
			<view class="d-flex-yCenter font-26 mt-20 pt-30">
				<text style="color: #B6B6B6;">申请时间</text>
				<text style="margin-left: 60rpx;">{{$tool.time(goodsInfo.create_at*1000)}}</text>
			</view>
			<view class="d-flex-yCenter font-26 mt-20 pt-30">
				<text style="color: #B6B6B6;">退款编号</text>
				<text style="margin-left: 60rpx;">{{refund_order_no}}</text>
			</view>
		</view>
		<view class="position-flex-bottom bgColor-white px-30 py-20 d-flex-yCenter">
			<button class="btn left" open-type="contact"
				v-if="goodsInfo.status==1 || goodsInfo.status==5 && goodsInfo.is_back_goods==1 && !goodsInfo.express_send_no">联系客服</button>

			<view class="btn left" v-if="goodsInfo.status==4 || goodsInfo.status==6 " @tap='quxiaoshensu'>取消申诉</view>
			<view class="btn left" v-if="goodsInfo.status==-1 && goodsInfo.appealable==1 " @tap='appels'>申诉</view>
			<view class="btn left" v-if="goodsInfo.status==0 || goodsInfo.status==-1 " @tap='quxiaoshenqing'>撤销申请</view>
			<text @tap='updateRfend' v-if="goodsInfo.status==0 || (goodsInfo.status==-1 && goodsInfo.can_apply==1)"
				url="#" class="btn right">修改申请</text>
			<view class="btn right" @tap='return_goods'
				v-if="goodsInfo.status==1 || goodsInfo.status==5 && goodsInfo.is_back_goods==1 && !goodsInfo.express_send_no">
				提交退货信息
			</view>
		</view>
	</view>
</template>

<script>
	import {
		http_user_order_refund_view,
		http_user_order_refund_cancel_apply,
		http_user_order_refund_cancel_appeal
	} from '@/config/apiRouter.js'
	export default {
		data() {
			return {
				statusArr: ['提交申请', '商家处理', '商品寄回', '商家退款', '退款成功'],
				order_no: '',
				refund_order_no: '',
				goodsInfo: {}
			}
		},
		computed: {
			infoStatus() {
				switch (this.goodsInfo.status) {
					case -1:
						return '已拒绝'
					case 0:
						return '申请中'
					case 1:
						return '已审核'
					case 2:
						return '已退款'
					case 3:
						return '已取消'
					case 4:
						return '申诉中'
					case 5:
						return '申诉成功'
					case 6:
						return '申诉驳回'
					case 7:
						return '申诉失败'
					default:
						return '异常状态'
				}
			}
		},
		onShow() {
			this.getdata()
		},
		onLoad(opens) {
			this.refund_order_no = opens.refund_order_no
			console.log(opens);
		},
		methods: {
			getdata() {
				http_user_order_refund_view({
					data: {
						refund_order_no: this.refund_order_no
					}
				}).then(res => {
					this.goodsInfo = res.data
					console.log(res.data.refund_all, '是否全部推');
				})
			},
			// 提交退货信息 
			return_goods() {
				let data = this.goodsInfo
				var address = {
					express_province: data.express_province,
					express_city: data.express_city,
					express_area: data.express_area,
					express_address: data.express_address,
					express_name: data.express_name,
					express_phone: data.express_phone,
					express_address_id: data.express_address_id,
					refund_order_no: this.refund_order_no,
					order_no: data.order_no
				}
				uni.navigateTo({
					url:'/goodsPackage/return_goods/return_goods?data='+JSON.stringify(address)
				})
			},
			// 取消申诉
			quxiaoshensu() {
				http_user_order_refund_cancel_appeal({
					data: {
						refund_order_no: this.goodsInfo.refund_order_no
					}
				}).then(res => {
					this.$tool.showToast('取消成功', true)
					setTimeout(() => {
						this.getdata()
					}, 800)
				})
			},
			// 修改申诉
			updateRfend() {
				uni.navigateTo({
					url: '/goodsPackage/refund/refund?type=1&order_no=' +
						this.goodsInfo.order_no + '&refund_all=' +
						this.goodsInfo.refund_all + '&order_list_id=' +
						this.goodsInfo.goods_list[0].id + '&refund_order_no=' + this.goodsInfo.refund_order_no
				})
			},
			// 取消申请
			quxiaoshenqing() {
				console.log(111111111111111111111);
				http_user_order_refund_cancel_apply({
					data: {
						refund_order_no: this.goodsInfo.refund_order_no
					}
				}).then(res => {
					this.$tool.showToast('取消成功', true)
					setTimeout(() => {
						this.getdata()
					}, 800)
				})
			},
			// 发起申诉
			appels() {
				uni.navigateTo({
					url: '/goodsPackage/appeal/appeal?type=0&order_no=' +
						this.goodsInfo.order_no + '&refund_all=' +
						this.goodsInfo.refund_all + '&order_list_id=' +
						this.goodsInfo.goods_list[0].id + '&refund_order_no=' + this.goodsInfo.refund_order_no
				})
			}
		}
	}
</script>

<style lang="scss">
	button {
		border: none;
		padding: 0;
		margin: 0;
		opacity: none;
		line-height: 1;
	}

	button::after {
		border: none;
		background-color: none;
		padding: 0;
		margin: 0;
	}

	page {
		height: 100%;
		background: #F5F5F5;
	}

	.goodItems {
		image {
			width: 150rpx;
			height: 150rpx;
			border-radius: 12rpx;
		}

		.pay {
			color: #CD0101;
		}
	}

	.title {
		.borderbg {
			height: 8rpx;
			background: #eee;
			border-radius: 4rpx;

			.actve {
				position: absolute;
				display: inline-block;
				width: 50%;
				height: 100%;
				border-radius: 4rpx;
				background: #FFAE00;
				transition: all 0.3s;
			}
		}

		.actve {
			color: #FFAE00;
		}
	}

	.position-flex-bottom {
		justify-content: flex-end;

		.btn {
			box-sizing: border-box;
			padding: 10rpx 30rpx !important;
			text-align: center;
			border-radius: 40rpx;
			font-size: 28rpx;
			margin: 0;
			outline: none;
			margin-left: 20rpx;
		}

		.left {
			border: 1px solid #000;
		}

		.right {
			background: #FF890B;
			color: #fff;
		}
	}
</style>
